<template>
    <el-form ref="form" v-if="isShowInfo" :model="form" :rules="rules" label-width="120px">
        <!-- <el-form-item label="菜单类型">
            <el-input v-model="form.menuName"/>
             <el-select v-model="form.nodeType">
                <el-option label="业务功能" value="0"></el-option>
                <el-option label="业务功能2" value="1"></el-option>
            </el-select>
        </el-form-item>-->
        <el-form-item label="菜单id">
            <el-input v-model="form.id" />
        </el-form-item>
        <el-form-item label="菜单名称">
            <el-input v-model="form.menuName" />
        </el-form-item>
        <el-form-item label="菜单路径">
            <el-input v-model="form.menuLink" />
        </el-form-item>
        <el-form-item label="菜单图标" v-if="form.parentSid==0 ? true:false">
            <el-input v-model="form.menuIcon" />
        </el-form-item>
        <el-form-item label="菜单所属父id" v-if="isNewMenu">
            <el-input v-model="form.parentSid" />
        </el-form-item>
        <el-form-item label="菜单所属父id" v-else>
            <el-input v-model="form.parentSid" />
        </el-form-item>
        <el-form-item label="菜单排序id">
            <el-input v-model="form.menuSort" />
        </el-form-item>
        <el-form-item label="路由名称">
            <el-input v-model="form.routerName" />
        </el-form-item>
        <el-form-item v-if="isNewMenu">
            <el-button size="small" @click.native="addMenu()">新增菜单</el-button>
            <el-button type="primary" size="small" @click.native="modificationMenu">修改菜单</el-button>
            <el-button size="small" type="danger" @click.native="deleteMenu">删除当前菜单</el-button>
        </el-form-item>
        <el-form-item v-else>
            <el-button type="primary" size="small" @click.native="saves">保存</el-button>
            <el-button size="small" @click.native="goBack">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'menuChildInfo',
    props: {
        childMenuInfo: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            form: {
                menuName: this.childMenuInfo.menuName,
                id: this.childMenuInfo.id,
                menuIcon: this.childMenuInfo.menuIcon,
                parentSid: this.childMenuInfo.parentSid,
                menuSort: this.childMenuInfo.menuSort,
                menuLink: this.childMenuInfo.menuLink,
                routerName: this.childMenuInfo.routerName,
            },
            isNewMenu: true,
            rules: {},
        };
    },
    // 监听childMenuInfo的改变
    watch: {
        childMenuInfo(val) {
            this.form.menuName = val.menuName;
            this.form.id = val.id;
            this.form.menuIcon = val.menuIcon;
            this.form.parentSid = val.parentSid;
            this.form.menuSort = val.menuSort;
            this.form.menuLink = val.menuLink;
            this.form.routerName = val.routerName;
        },
    },
    created() {

    },
    computed: {
        isShowInfo() {
            return !isEmptyObject(this.childMenuInfo || {});
        },
    },
    methods: {
        // 新增菜单
        addMenu() {
            this.isNewMenu = false;
            console.log('submit');
        },
        // 修改菜单
        modificationMenu() {
            const param = this.form;
            this.$refs.form.validate((valid) => {
                console.log('er1234r');
                if (valid) {
                    console.log('err111');
                    this.$post.nebulaApi.updateMenu(param).then((res) => {
                        this.childMenuInfo = res.data.content;
                        this.$message.success(res.data.content);
                    }, (err) => {
                        this.$message.error(err.msg);
                    });
                } else {
                    return false;
                }
            });
        },
        // 保存修改
        saves() {
            // var this_ = this;
            const param = this.form;
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.$post.nebulaApi.addMenu(param).then((res) => {
                        if (res.success) {
                            this.$message.success(res.data.content);
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        // 删除菜单  deleteMenu
        deleteMenu() {
            const { id } = this.form;
            this.$post.nebulaApi.deleteMenu(id).then((res) => {
                this.childMenuInfo = res.data.content;
                this.$message.success(res.data.msg);
            }, (err) => {
                this.$message.error(err.msg);
            });
        },
        // 返回修改
        goBack() {
            this.isNewMenu = true;
        },
    },
};
</script>

<style lang='scss'>
</style>
